<template>
	<view style="display: flex;align-items: center;flex-direction: column;">
		<template v-if="statusTiktok==0">
			<view class="container">
				<view class="header">
					实名信息
				</view>
				<view class="inputWrapper">
					<view class="title">
						姓名
					</view>
					<input v-model="userName" class="input" :focus="true" type="text" placeholder="请输入姓名" />
				</view>
				<view class="inputWrapper">
					<view class="title">
						身份证号
					</view>
					<input v-model="idCardNumber" class="input"  type="number" placeholder="请输入身份证号" />
				</view>
				<view class="uploadWrapper">
					<view class="title">
						本人照片
					</view>
					<image v-if="photo" class="imageContent" :src="photo" mode="" @click="choosePhoto"></image>
					<view v-else class="content" @click="choosePhoto">
						<image style="width: 60rpx;height: 60rpx;" src="@/static/image/icon_camera.png" mode="">		
						</image>
					</view>
					<view class="detail" @click="gotoTip(0)">
						<u-icon class="icon" color="#17f" :size="'28rpx'" name="info-circle"></u-icon>
						<text class="text">查看示例</text>	
					</view>
				</view>
			</view>

			<view class="container">
				<view class="header">
					申请信息
				</view>
<!-- 				<view class="sub">
					小程序
					<image src="../static/image/add.png" class="icon" mode=""></image>
					<text class="text">梦维云</text>
				</view> -->
				<view class="inputWrapper">
					<view class="title">
						抖音号
					</view>
					<input v-model="douyinAccount" class="input" type="text" placeholder="请输入抖音号" />
				</view>
				<view class="uploadWrapper">
					<view class="detail" @click="gotoTip(1)">
						<u-icon class="icon" color="#17f" :size="'28rpx'" name="info-circle"></u-icon>				
						<text class="text">如何查看抖音号</text>	
					</view>
				</view>
			</view>
			<view class="bottomBtnContainer">
				<view class="bottomBtnWrapper" @click="onSave">
					提交申请
				</view>
			</view>
		</template>
		<template v-else-if="statusTiktok==1">
			<view class="verifyContainer">
				<view class="icon">

				</view>
				<view class="title">
					信息审核中，预计2-3个工作日
				</view>
			</view>
		</template>
		<template v-else-if="statusTiktok==2">
			<view class="statusContainer">
<!-- 				<view class="header">
					<image class="left" src="../static/image/add.png" mode=""></image>
					<view class="right">
						<view class="title">
							数字房产
						</view>
						<view class="text">
							授权时间：2023-11-15    14:38:53
						</view>
						<view class="text">
							有效期至：2024-11-15    14:38:53
						</view>
					</view>
				</view> -->
				<view class="content">
					<view class="title">
						开通能力
					</view>
					<view class="item">
						<view class="">
							短视频挂载
						</view>
						<u-icon color="#17f" :size="'30rpx'" name="checkmark-circle-fill"></u-icon>
					</view>
					<view class="item">
						<view class="">
							直播间挂载
						</view>
						<u-icon color="#17f" :size="'30rpx'" name="checkmark-circle-fill"></u-icon>
					</view>
					<view class="time" style="margin-top: 40rpx;">
						授权时间：{{authTiktokPermissionValidStartTime}}
					</view>
					<view class="time">
						有效期至：{{authTiktokPermissionValidEndTime}}
					</view>
				</view>
			</view>
<!-- 			<view class="bottomBtnContainer">
				<view class="bottomBtnWrapper">
					解除能力
				</view>
			</view> -->
		</template>

	</view>
</template>

<script>
	const api = require("@/static/js/api.js")
	const utils = require("@/static/js/utils.js")
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	let that = null


	export default {
		data() {
			return {
				userName: "",
				idCardNumber: "",
				photo: "",
				douyinAccount: "",
				resultObj:{},

				statusTiktok: -1,
			};
		},

		computed: {
			...mapState({
				hasLogin: state => state.userInfo.hasLogin,
				isAuthPhone: state => state.userInfo.isAuthPhone,
				isAuthUserInfo: state => state.userInfo.isAuthUserInfo,
				isSeller: state => state.userInfo.isSeller,
				sellerObj: state => state.userInfo.sellerObj,
				buyerObj: state => state.userInfo.buyerObj,
				shopInfo: state => state.userInfo.shopInfo,
				buyerId: state => state.userInfo.buyerObj.id,
        authTiktokPermissionValidStartTime: state => state.userInfo.authTiktokPermissionValidStartTime,
        authTiktokPermissionValidEndTime: state => state.userInfo.authTiktokPermissionValidEndTime,
			}),
		},

		onLoad(options) {
			that = this;
			that.getTiktokPermission()
		},
		onShow() {

		},
		methods: {
			...mapMutations(['setUserInfo', 'setLoginStatus', 'setUserId', "setOrigin"]),
			gotoTip(id){
				uni.navigateTo({
					url: "/pages/shop/tiktok/tip?id=" + id
				})
			},
			
			choosePhoto() {
				let that = this
				uni.chooseImage({
					count: 1,
					success: res => {
						console.log(res)
						if (res.tempFilePaths&&res.tempFilePaths.length==1){
							utils.uploadImage(res.tempFilePaths[0], that.buyerId, (path)=>{
								that.photo = path;				
							})	
						}
					},
				})
			},
			
			check(){
				if (!that.resultObj.id){
					uni.showToast({
						icon:"none",
						title: "信息异常"
					})
					return false
				}else if (!that.userName){
					uni.showToast({
						icon:"none",
						title: "请输入姓名"
					})
					return false
				}else if (!that.idCardNumber){
					uni.showToast({
						icon:"none",
						title: "请输入身份证号码"
					})
					return false
				}else if (!that.photo){
					uni.showToast({
						icon:"none",
						title: "请上传本人照片"
					})
					return false
				}else if (!that.douyinAccount){
					uni.showToast({
						icon:"none",
						title: "请输入抖音账号"
					})
					return false
				}
				return true
			},
			
			onSave(){
				if (this.check()){
					uni.showLoading({
						
					})
					api.editTiktokPermission({
						param: {
							id: that.resultObj.id,
							userName: that.userName, 
							idCardNumber: that.idCardNumber,
							photo: that.photo,
							douyinAccount: that.douyinAccount,
						}
					}).then(res => {
						console.log("editTiktokPermission",res)
						if (res.success) {
							that.statusTiktok = 1
							that.getTiktokPermission()
						}
					}).finally(end=>{
						uni.hideLoading()
					})
				}		
			},
			
			getTiktokPermission() {
				let that = this
				api.getTiktokPermission({
					param: {
					}
				}).then(res => {
					console.log("getTiktokPermission",res)
					if (res.success) {
						if (res.data.authStatus == 'authed'){
							this.statusTiktok = 2
						}else if (res.data.authStatus == 'applying'){
							this.statusTiktok = 1
						}else{
							this.statusTiktok = 0
						}
						
						that.userName = res.data.userName||""
						that.idCardNumber = res.data.idCardNumber||""
						that.photo = res.data.photo||""
						that.douyinAccount = res.data.douyinAccount||""
						
						that.resultObj = res.data
					}
				})
			},
		}
	}
</script>
<style>
	page{
		background-color: #f6f6f6;
	}
</style>

<style lang="scss">
	.container {
		width: 708rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 40rpx 60rpx;
		margin-top: 20rpx;

		.header {
			font-size: 30rpx;
			font-weight: bold;
			color: #222;
			line-height: 40rpx;
		}

		.inputWrapper {
			width: 578rpx;
			height: 66rpx;
			background-color: #f3f3f3;
			border-radius: 33rpx;
			padding: 0 40rpx;
			line-height: 66rpx;
			display: flex;
			font-size: 24rpx;
			margin-top: 30rpx;
			align-items: center;

			.title {
				width: 130rpx;
				color: #222;
				font-weight: bold;
			}

			.input {
				width: 350rpx;
				color: #444;
				font-size: 24rpx;
			}
		}

		.uploadWrapper {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 22rpx;
			color: #222;
			margin-top: 30rpx;

			.title {
				margin-bottom: 20rpx;
				font-size: 26rpx;
				font-weight: bold;
			}
			.imageContent{
				width: 500rpx;
				height: 300rpx;
				border-radius: 10rpx;
				border: solid 3rpx #adacac;
			}
			.content {
				width: 102rpx;
				height: 102rpx;
				border-radius: 15rpx;
				border: solid 3rpx #adacac;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.detail {
				display: flex;
				align-items: center;
				color: #17f;
				margin-top: 30rpx;
				
				.text{
					text-decoration: underline;
				}
				.icon {
					margin-right: 10rpx;
				}
			}
		}

		.sub {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #888;
			margin-top: 30rpx;

			.text {
				color: #333;
			}

			.icon {
				border-radius: 50%;
				width: 40rpx;
				height: 40rpx;
				margin-left: 30rpx;
				margin-right: 15rpx;
			}
		}
	}

	.verifyContainer {
		display: flex;
		flex-direction: column;
		align-items: center;
		.icon {
			width: 182rpx;
			height: 182rpx;
			margin-top: 200rpx;
			background-image: url(@/static/image/icon_tiktok_verify.png);
		}

		.title {
			font-size: 24rpx;

			font-stretch: normal;
			line-height: 30rpx;
			letter-spacing: 0rpx;
			color: #666;
			margin-top: 70rpx;
		}
	}

	.statusContainer {
		.header {
			width: 694rpx;
			height: 187rpx;
			background-color: #ffffff;
			box-shadow: 0rpx 6rpx 12rpx 1rpx rgba(19, 24, 0, 0.03);
			border-radius: 10rpx;
			padding: 40rpx 30rpx;
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			margin-bottom: 30rpx;
			.left{
				width: 100rpx;
				height: 100rpx;
				margin-right: 20rpx;
			}
			
			.right{
				width: 400rpx;
				font-size: 26rpx;
				line-height: 40rpx;
				color: #222;
				.title{
					width: 100%;
					margin-bottom: 20rpx;
				}
				.text{
					width: 100%;
					font-size: 22rpx;
					color: #888;
				}
			}	
		}
		.content{
			width: 694rpx;
			background-color: #ffffff;
			box-shadow: 0rpx 6rpx 12rpx 1rpx 
				rgba(19, 24, 0, 0.03);
			border-radius: 10rpx;
			padding: 0 40rpx 20rpx 40rpx;
			min-height: 400rpx;
			margin-top: 30rpx;
			.title{
				height: 70rpx;
				line-height: 70rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #222;
				border-bottom: 1px #f3f3f3 solid;
				margin-bottom: 10rpx;
			}
			.item{
				height: 70rpx;
				line-height: 70rpx;
				font-size: 22rpx;
				display: flex;
				justify-content: space-between;
				.icon{
					width: 26rpx;
					height: 26rpx;
				}
			}
			.time{
				text-align: end;
				width: 100%;
				font-size: 22rpx;
				color: #888;
			}
		}

	}
</style>